<route lang="json5" type="me">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="me_container">
    <view class="top_box">
      <img src="../../static/images/ic_app_logo.png" />
      <text>曹栋国</text>
      <text>中国外运股份有限公司</text>
    </view>
    <view class="msg_box">
      <view class="msg_item" v-for="(item, index) in msgData" :key="index">
        <text>{{ item.label }}</text>
        <text>{{ item.value }}</text>
      </view>
    </view>
    <view class="btn_quit">{{ t('me.loginOut') }}</view>
  </view>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'Me',
})
const msgData = reactive([
  {
    label: computed(() => t('me.Phone')),
    value: '18600032346',
  },
  {
    label: computed(() => t('me.Email')),
    value: 'caodongguo@sinotrans.com',
  },
  {
    label: computed(() => t('me.Version')),
    value: '3.0.2',
  },
  {
    label: computed(() => t('me.OrgCode')),
    value: '100000',
  },
  {
    label: computed(() => t('me.OrgRole')),
    value: '客户管理,计划管理,APP发布,船东管理,船次管理,总部管理',
  },
])

// 测试
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
// 表单
</script>
<style lang="scss" scoped>
.me_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  .top_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 320rpx;
    background-color: #295699;
    img {
      height: 80rpx;
      margin-top: 60rpx;
      margin-bottom: 16rpx;
      border-radius: 40rpx;
    }
    text {
      font-size: 32rpx;
      color: #fcfcff;
      &:nth-child(3) {
        margin-top: 35rpx;
        font-size: 24rpx;
      }
    }
  }
  .msg_box {
    .msg_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 26rpx;
      border-bottom: 2rpx solid #f9f9f9;
      text {
        font-size: 28rpx;
        font-weight: 700;
        color: #3f3f3f;
        &:nth-child(1) {
          min-width: 160rpx;
        }
        &:nth-child(2) {
          font-size: 26rpx;
          color: #676767;
        }
      }
    }
  }
  .btn_quit {
    width: 80vw;
    padding: 20rpx 0;
    margin-top: 60rpx;
    font-weight: 700;
    color: #4788e1;
    text-align: center;
    border: 2rpx solid #eaeaea;
  }
}
</style>
